import { reactive } from "vue";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";
import { getAssetsFile } from "@/utils/map";

const store: {
  point: Array<any>;
  line: Array<any>;
} = reactive({
  point: [],
  line: [],
});

export const useDeviceCategory = async () => {
  const getPipeDataByType = async (classId: string) => {
    const params = {
      pageSize: 1000,
      pageIndex: 1,
      pClassId: classId,
    };
    const rst = await DeviceCategoryApi["api_query"](params);
    const { data, succeeded }: any = rst;
    if (succeeded) {
      return data.items;
    }
    return [];
  };
  store.point = await getPipeDataByType("01");
  store.line = await getPipeDataByType("02");
  store.getIconUrl = (classId: string) => {
    const pointCategoryList = store.point;
    if (pointCategoryList) {
      const obj = pointCategoryList.find(
        (item: any) => item.classId === classId
      );
      if (obj) {
        const { image } = obj;
        const iconUrl = getAssetsFile("device/" + image + ".png");
        return iconUrl;
      }
      return getAssetsFile("device/1.png");
    }
    return null;
  };
  store.getLineColor = (classId: string) => {
    const lineCategoryList = store.line;
    if (lineCategoryList) {
      const obj = lineCategoryList.find(
        (item: any) => item.classId === classId
      );
      if (obj) {
        const { image } = obj;
        return image || "blue";
      }
    }
    return "blue";
  };
  return store;
};
